<script type="text/javascript" src="/{$#app_name}/FCKeditor/fckeditor.js"></script>
    <script language="Javascript">
// Gets a element by its Id. Used for shorter coding.
function GetE( elementId )
{
	return document.getElementById( elementId )  ;
}

function SetAttribute( element, attName, attValue )
{
	if ( attValue == null || attValue.length == 0 )
		element.removeAttribute( attName, 0 ) ;			// 0 : Case Insensitive
	else
		element.setAttribute( attName, attValue, 0 ) ;	// 0 : Case Insensitive
}

      //function initEditors()
      window.onload= function()
      {
        var BasePath  = '/{$#app_name}/FCKeditor/';
        var oDescriptionEditor = new FCKeditor( 'eventtext' ) ;
        oDescriptionEditor.BasePath = BasePath;
        oDescriptionEditor.Height = 300;
        oDescriptionEditor.Width = '{$#totalwidth}';
        oDescriptionEditor.ReplaceTextarea();

        prepareForm();
      }

</script>


<h1 align="center"> </h1>

<SCRIPT language="javascript" src="/{$#app_name}/include/zts_picker.js"></SCRIPT>
<script language="javascript">
    function showStartDateCalendar() {
        //var day = document.EventForm.start_day.value;
        //var month = document.ArticleForm.start_month.selectedIndex;
        //var year = document.ArticleForm.start_year.value;
        //var dt = new Date();
    	//if (day>=1 && month>=1 && year>=2000) dt = new Date(year,month-1,day);
    	//var str_dt = dt2dtstr(dt);
        var str_dt = document.EventForm.startdate_input.value;
    	//alert(str_dt);
    	show_calendar('setStartDate',str_dt);
    }
	function setStartDate(str_dt) {
			//alert(str_dt);
			document.EventForm.startdate_input.value =  str_dt;
			//var dt_datetime = (str_dt == null || str_dt =="" ?  new Date() : str2dt(str_dt));
			//var month = dt_datetime.getMonth()+1;
			//alert(month);
			//var day = dt_datetime.getDate();
            //var year = dt_datetime.getYear();
            //alert(day);
            //document.ArticleForm.show_day.value = day;
            //document.ArticleForm.show_year.value = year;
            //document.ArticleForm.show_month.selectedIndex = month;
	}
    function showDateCalendar() {

        var str_dt = document.EventForm.date_single.value;
    	//alert(str_dt);
    	show_calendar('setDate',str_dt);
    }
	function setDate(str_dt) {
			//alert(str_dt);
			document.EventForm.date_single.value =  str_dt;
	}
    function showEndDateCalendar() {

        var str_dt = document.EventForm.enddate_input.value;
    	//alert(str_dt);
    	show_calendar('setEndDate',str_dt);
    }
	function setEndDate(str_dt) {
			//alert(str_dt);
			document.EventForm.enddate_input.value =  str_dt;
	}

	function submitForm(action) {
	  var form = document.EventForm;
	  var valid = checkForm(form);
	  if (valid) {
	  	 //form.create.value
         //if (action == 1)  form.submit();
         //else if (action == 2) form.submit();
         form.submit();

	  }
	}

    function checkForm(form)
	{
		//var month=new Array('');
        //check whether create or save buttons were pressed
	    if (form.button.value.length==0) return true;

        var titleE = GetE('title');
        if(titleE && titleE.value.length==0)
   		{
    		alert('Specify calendar event title, please!');
    		return false;
   		}
   		var textE = GetE('eventtext');
  		if(textE && textE.value.length==0)
   		{
    		//alert('Specify calendar event description,please!');
    		//return false;
   		}
   		//var typeE =  GetE('event_type');
   		var date_singleE = GetE('date_single');
   		var typechecked = false;
        if (form.event_type[0].checked) typechecked = true;
        if (form.event_type[1].checked) typechecked = true;
        if (form.event_type[2].checked) typechecked = true;
        if(!typechecked)
      	{
        	alert('Please, specify the Event type!');
        	return false;
      	}

  		if(form.event_type[0].checked)
  		{
      		if(date_singleE && !date_singleE.value.length)
      		{
        		alert('Please, specify the Date of Event!');
        		return false;
      		}
  		}
  		else if(form.event_type[1].checked)
  		{
			if(!form.startdate_input.value.length)
      		{
        		alert('Please, specify the Start Date !');
        		return false;
      		}
      		if(!form.enddate_input.value.length)
      		{
        		alert('Please, specify the End Date !');
        		return false;
      		}
      		var recurrence = false;
      		if (form.recurrence[0].checked) recurrence = true;
            if (form.recurrence[1].checked) recurrence = true;
            if (form.recurrence[2].checked) recurrence = true;
            if(!recurrence)
      		{
        		alert('Please, specify the Occurence type!');
        		return false;
      		}
      		var ar=form.startdate_input.value.split('/');
      		var sdate=new Date(ar[2],ar[1]-1,ar[0]);
      		ar=form.enddate_input.value.split('/');
      		var edate=new Date(ar[2],ar[1]-1,ar[0]);
      		if(sdate>edate) {
      			alert('Start Date must be less then End Date!');
      			return false;
      		}

  		}
  		else if(form.event_type[2].checked)
  		{
  			var sdate=new Date(form.startyear.value,form.startmonth.value-1);
      		var edate=new Date(form.endyear.value,form.endmonth.value-1);

      		if(sdate>edate) {
      			alert('Start Date must be less then End Date!');
      			return false;
      		}

  		}


  		return true;
}

function typeChanged(event_type) {
	var date_singleE = GetE('date_single');
    var startdate_inputE = GetE('startdate_input');
    var enddate_inputE = GetE('enddate_input');
    var recurrence0 = document.EventForm.recurrence[0]; //GetE('recurrence');
    var recurrence1 = document.EventForm.recurrence[1]; //GetE('recurrence');
    var recurrence2 = document.EventForm.recurrence[2]; //GetE('recurrence');
    var recurrenceE = GetE('recurrence');
    var weekdayE = GetE('weekday');
    var monthdayE = GetE('monthday');
    var weeknumberE = GetE('weeknumber');
    var weekday_monthlyE = GetE('weekday_monthly');
    var startmonthE = GetE('startmonth');
    var startyearE = GetE('startyear');
    var endmonthE = GetE('endmonth');
    var endyearE = GetE('endyear');

    //alert(event_type);

    if ( event_type == 1) {
    	// enable
    	if (date_singleE) date_singleE.disabled = false;
    	// disable
        if (startdate_inputE) startdate_inputE.disabled = true;
        if (enddate_inputE) enddate_inputE.disabled = true;
        if (weekdayE) weekdayE.disabled = true;
        if (monthdayE) monthdayE.disabled = true;
        //if (recurrenceE) {
            if (recurrence0) recurrence0.checked = false;
            if (recurrence1) recurrence1.checked = false;
            if (recurrence2) recurrence2.checked = false;
        	if (recurrence0) recurrence0.disabled = true;
        	if (recurrence1) recurrence1.disabled = true;
        	if (recurrence2) recurrence2.disabled = true;
        //}

        //
        if (weeknumberE) weeknumberE.disabled = true;
    	if (weekday_monthlyE) weekday_monthlyE.disabled = true;
    	if (startmonthE) startmonthE.disabled = true;
    	if (startyearE) startyearE.disabled = true;
        if (endmonthE) endmonthE.disabled = true;
        if (endyearE) endyearE.disabled = true;

    } else if(event_type == 2)    {
    	// enable
        if (startdate_inputE) startdate_inputE.disabled = false;
        if (enddate_inputE) enddate_inputE.disabled = false;
        if (weekdayE) weekdayE.disabled = false;
        if (monthdayE) monthdayE.disabled = false;
        if (recurrenceE) {
        	if (recurrence0) recurrence0.disabled = false;
        	if (recurrence1) recurrence1.disabled = false;
        	if (recurrence2) recurrence2.disabled = false;
        }
        // disable
        if (date_singleE) date_singleE.disabled = true;
        //
        if (weeknumberE) weeknumberE.disabled = true;
    	if (weekday_monthlyE) weekday_monthlyE.disabled = true;
    	if (startmonthE) startmonthE.disabled = true;
    	if (startyearE) startyearE.disabled = true;
        if (endmonthE) endmonthE.disabled = true;
        if (endyearE) endyearE.disabled = true;
    } else if(event_type == 5)    {
    	// enable
    	if (weeknumberE) weeknumberE.disabled = false;
    	if (weekday_monthlyE) weekday_monthlyE.disabled = false;
    	if (startmonthE) startmonthE.disabled = false;
    	if (startyearE) startyearE.disabled = false;
        if (endmonthE) endmonthE.disabled = false;
        if (endyearE) endyearE.disabled = false;
        // disable
        if (date_singleE) date_singleE.disabled = true;
        //
        if (startdate_inputE) startdate_inputE.disabled = true;
        if (enddate_inputE) enddate_inputE.disabled = true;
        if (weekdayE) weekdayE.disabled = true;
        if (monthdayE) monthdayE.disabled = true;
        //if (recurrenceE) {
            if (recurrence0) recurrence0.checked = false;
            if (recurrence1) recurrence1.checked = false;
            if (recurrence2) recurrence2.checked = false;
        	if (recurrence0) recurrence0.disabled = true;
        	if (recurrence1) recurrence1.disabled = true;
        	if (recurrence2) recurrence2.disabled = true;
        //}

    }

}

function prepareForm()  {
	var form = document.EventForm;
	var type = 1;
	if (form) {
		if ( form.event_type[0].checked ) type = 1;
		if ( form.event_type[1].checked ) type = 2;
		if ( form.event_type[2].checked ) type = 5;
	}
	typeChanged(type);

}





</SCRIPT>

<form id="EventForm" name="EventForm" method="post" action="" runat="server" onSubmit="return checkForm(this);">
<input name="event_id" type="hidden" id="event_id" runat="server">
<input name="page" type="hidden" id="page" runat="server">
<hr>
<core:optional for="msg">
	<span class="message" runat="server"> {$msg} </span>
</core:optional>
<table width="{$#totalwidth}" border="0" align="center" cellspacing="2" cellpadding="3">
<tr><td colspan="2" class="textlogin" style="font-size:10pt;left-pedding:20;padding-bottom:5;">Note: Fields marked with asterick (<font color="red">*</font>) are obligatory</td></tr>
    <tr align="left">
    	<td class="whiteheader_center">
    		<core:optional for="event_id">
    			Edit the event (ID: {$event_id})
            </core:optional>
            <core:default for="event_id">
            	Create a new event
            </core:default>
         </td>
         <td class="whiteheader">
            <a href="/{$#app_name}/myprofile/index.htm"> My Profile </a> &nbsp;
           	<html:link url="/">All events </html:link>
          </td>
     </tr>

    <core:default for="supress_errors">
    <ERRORSUMMARY id='Summary' runat="server">
        <tr valign="top">
          <td width="{$#width}">Errors: &nbsp;</td>
          <td class="left">
          	<FONT COLOR="RED">
          		<list:ITEM> {$ErrorMessage} &nbsp; </list:ITEM>
          	</FONT>
          </td>
        </tr>
     </ERRORSUMMARY>
     </core:default>

     <tr>
     	<td class="small" colspan="2">
     		<core:optional for="article_id">
     			Enter your changes to the information below to edit an existing content item.
     			When you are finished, press the Save button.
            </core:optional>
     	</td>
     </tr>

     <tr valign="top">
       <td class="form_label" width="{$#width}">
      	 <label for="title" runat="server"><font color="red">*</font>Event title:</label>
       </td>
       <td class="form_field">
         <input name="title" type="text" id="title" size="64" runat="server">
       </td>
     </tr>


     <core:optional for="event_id">
     <tr valign="top">
       <td class="form_label" width="{$#width}">
      	 <label for="date_added" runat="server">Date Posted:</label>
       </td>
       <td class="form_field">
         <span class="small"> {$date_submitted} </span>
       </td>
     </tr>
     <tr valign="top">
       <td class="form_label" width="{$#width}">
      	 <label for="author" runat="server">Author:</label>
       </td>
       <td class="form_field">
         <span class="small"> {$author_show} </span>
       </td>
     </tr>
     <tr valign="top">
       <td class="form_label" width="{$#width}">
      	 <label for="url" runat="server">URL:</label>
       </td>
       <td class="form_field">
         <span class="small"> {$public_url} </span>
       </td>
     </tr>
     </core:optional>


     <core:optional for="staff_user">
     <tr valign="top">
       <td class="form_label" width="{$#width}">
      	 <label for="premium" runat="server">Premium content</label>
       </td>
       <td class="form_field">
         <input name="premium" type="checkbox" id="premium" value="1" runat="server">
       </td>
     </tr>
     </core:optional>


     <core:optional for="staff_user">
     <tr valign="top">
       <td class="form_label" width="{$#width}">
      	 <label for="published" runat="server">Approved/Published</label>
       </td>
       <td class="form_field">
         <input name="published" type="checkbox" id="published" value="1" runat="server">
       </td>
     </tr>
     </core:optional>


     <tr valign="top">
       <td class="form_label" colspan="1">
      	 <label runat="server">Text of the event</label>
       </td>
     </tr>

     <tr valign="top">
       <td class="form_field" colspan="2">
      	 <textarea name="eventtext" id="eventtext" runat="server" cols="80" rows="10"> </textarea>
       </td>
     </tr>


     <tr>
      <td class="whiteheader_center" colspan="2">&nbsp;</td>
     </tr>
</table>







<!-- Calendar submission -->
<table width="{$#totalwidth}" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center">

        <table width="100%" border="0" align="center" cellspacing="0" cellpadding="4">

          <tr bgcolor="#fdfda7">
            <td colspan="2">
            	<div align="left">
            		<font color="#CC0000"><b>*</b></font>
            		<font face="Arial, Helvetica, sans-serif" color="#000099">
            		Please select one of the date options below for your event:
            		</font>
            	</div>
            </td>
          </tr>
          <tr bgcolor="#fdfda7">
            <td colspan=2> <table width="100%" border=1>
                <tr bgcolor="#fdfda7">
                  <td width="100%" bgcolor="#fdfda7">
                  	<table border=0 width="99%">
                      <tr bgcolor="#fdfda7">
                        <td colspan=2 align="left">
                          <input type="radio" value="1" name="event_type" onclick="typeChanged(this.value);" id="type1" runat="server">
                          <font face="Arial, Helvetica, sans-serif" color="#000099">(Single Date)</font>
                        </td>
                      </tr>
                      <tr bgcolor="#fdfda7">
                        <td align="left">
                        	<div align="left">
                        		<font face="Arial, Helvetica, sans-serif" color="#000099">
                        			Date of Event
                        		</font>
                        	</div>
                        </td>
                        <td align="left">
                        	<div align="left">
                        		<font face="Arial, Helvetica, sans-serif" size="2">
                            		<input type="text" size="10" name="date_single" id="date_single">
                            	</font>
                                <a href="javascript:showDateCalendar();">
           						<img height=20  src="/{$#app_name}/images/calendar.gif" width=20 border=0 >
         						</a>
                          	</div>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr bgcolor="#fdfda7">
            <td colspan=2>
            	<table width="100%" border="1">
                <tr>
                  <td>
                  	<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
                      <tr bgcolor="#fdfda7">
                        <td colspan="2">
                        	<input type="radio" value="2" name="event_type" onclick="typeChanged(this.value);" id="type2" runat="server">
                            <font face="Arial, Helvetica, sans-serif" color="#000099">
                            (Multiple Dates)
                            </font>
                        </td>
                      </tr>
                      <tr bgcolor="#fdfda7">
                        <td width="33%">
                        	<font face="Arial, Helvetica, sans-serif" color="#000099">
                        		Date Range for Event
                        	</font>
                        </td>
                        <td width="32%">
                        	<font face="Arial, Helvetica, sans-serif" color="#000099">
                        	Type of Occurrence
                        	</font>
                        </td>
                      </tr>
                      <tr bgcolor="#fdfda7">
                        <td width="33%">
                        	<font face="Arial, Helvetica, sans-serif" color="#000099">
                        		Start Date&nbsp;
                          		<input type="text" size="10"  name="startdate_input" id="startdate_input" runat="server">
                            </font>
                            <a href="javascript:showStartDateCalendar();">
           						<img height=20  src="/{$#app_name}/images/calendar.gif" width=20 border=0 >
         					</a>
                        </td>
                        <td width="32%">
                        	<font face="Arial, Helvetica, sans-serif" color="#000099">
                          	<input type="radio" name="recurrence" id="recurrence_daily" value="2">
                          		every day in range
                          	</font>
                        </td>
                      </tr>
                      <tr bgcolor="#fdfda7">
                        <td width="33%">
                        	<font face="Arial, Helvetica, sans-serif" color="#000099">
                        		End Date&nbsp;&nbsp;
                          		<input type="text" size="10"  name="enddate_input" id="enddate_input" runat="server">
                          	</font>
                            <a href="javascript:showEndDateCalendar();">
           						<img height=20  src="/{$#app_name}/images/calendar.gif" width=20 border=0 >
         					</a>
                        </td>
                        <td width="32%">
                          <input type="radio" name="recurrence" id="recurrence_monthly" value="3">
                          <font face="Arial, Helvetica, sans-serif" color="#000099">
                             day of month
                          <select name="monthday" id="monthday" runat="server">
                          </select>
                          </font>
                        </td>
                      </tr>
                      <tr bgcolor="#fdfda7">
                        <td width="33%">&nbsp;</td>
                        <td width="32%">
                        	<font face="Arial, Helvetica, sans-serif" color="#000099">
                            <input type="radio" name="recurrence" id="recurrence_weekly" value="4">
                          		day of week&nbsp;
                          	<select name="weekday" id="weekday" runat="server">
                            </select>
                            </font>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <tr>
            <td colspan="2" bgcolor="#fdfda7"> <table border=1 width="100%">
                <tr>
                  <td>
                  	<table border=0 width="100%">
                      <tr bgcolor="#fdfda7">
                        <td colspan="2" align="left">
                          <input type="radio" value="5" name="event_type" onclick="typeChanged(this.value);" id="type5" runat="server">
                          <font face="Arial, Helvetica, sans-serif" color="#000099">
                          	(Monthly Recurrence)
                          </font>
                        </td>
                      <tr bgcolor="#fdfda7">
                        <td align="left" colspan=2>
                        	<div align="left">
                        		<font face="Arial, Helvetica, sans-serif" color="#000099">
                            	<select size="1" name="weeknumber" id="weeknumber" runat="server">
                                </select>
                                <select size="1" name="weekday_monthly" id="weekday_monthly" runat="server">
                                </select>
                                of the month
                                </font>
                            </div>
                        </td>
                      </tr>
                      <tr>
                        <td align="left" colspan=2>
                        	<div align="left">
                        		<font face="Arial, Helvetica, sans-serif" size="1" color="#000099">
                        			Start Month &nbsp;
                            		<select name="startmonth"  id="startmonth" runat="server">
                              	    </select>
									&nbsp;Start Year &nbsp;
                                    <select name="startyear"  id="startyear" runat="server">
                              	    </select>
                            		<br>
                            		End Month &nbsp;&nbsp;
                                    <select name="endmonth"  id="endmonth" runat="server">
                              	    </select>
									&nbsp;End Year &nbsp;&nbsp;
                            		<select name="endyear"  id="endyear" runat="server">
                              	    </select>
                            	</font>
                            </div>
                        </td>
                      </tr>
                      <tr>
                        <td align="left" colspan=2> <div align="left"></div></td>
                      </tr>
                      <tr>
                        <td align="left" colspan=2> </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              <center>
                <br>
                <br>
              </center>
            </td>
          </tr>
          <tr>
          </tr>
        </table>
      </td>
  </tr>
</table>
<!-- Calendar submission ended -->
<br>
<table width="{$#totalwidth}" border="0" align="center" cellspacing="2" cellpadding="3">

	<tr>
      <td>&nbsp;</td>
      <td class="form_field">
            <input type="hidden" name="button" id="button" value="" runat="server"/>
      		<core:default for="event_id">

      			<input type="submit" name="create" id="create" value="Create"
      			onclick="javascript:document.EventForm.button.value = this.value;" runat="server"/>

                <!--<input type="submit" name="create" id="create" value="Create" runat="server" style="visibility:hidden"/>-->
                <!--<input type="hidden" name="create" id="create" value="create" runat="server"/> -->
            </core:default>
            <core:optional for="event_id">

      			<input type="submit" name="save" id="save" value="Save"
      			onclick="javascript:document.EventForm.button.value = this.value;" runat="server"/>

      			<!--<input type="submit" name="save" value="Save" runat="server" style="visibility:hidden"/>-->
                <!--<input type="submit" name="delete" value="Delete" runat="server">-->
                <!--<input type="hidden" name="save" id="save" value="save" runat="server"/> -->
            </core:optional>
            <input type="submit" name="clean" value="Clean"
            onclick="javascript:document.EventForm.button.value = '';"  runat="server"/>
            <input type="submit" name="events" value="Back to events"
            onclick="javascript:document.EventForm.button.value = '';" runat="server"/>
      </td>
	</tr>

</table>


</form>

<!--
<script language="Javascript">
	initEditors();

</script>
-->